
let { $, table, layer, form, upload } = layui;
export default class Add {
    constructor() {
        this.render();//render自定义取名
        this.handle();
    }
    render() {

        let template = `
        <form  style="max-height: 800px; overflow:auto" class="layui-form addForm" lay-filter="addForm" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">电影名</label>
            <div class="layui-input-block">
                <input
                    type="text"
                    name="name"
                    required
                    lay-verify="required"
                    placeholder="请输入电影名"
                    autocomplete="off"
                    class="layui-input"
                />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电影英文名</label>
            <div class="layui-input-block">
                <input
                    type="text"
                    name="ename"
                    required
                    lay-verify="required"
                    placeholder="请输入电影英文名"
                    autocomplete="off"
                    class="layui-input"
                />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电影的类型</label>
            <div class="layui-input-block">
                <input
                    type="text"
                    name="type"
                    required
                    lay-verify="required"
                    placeholder="请输入电影的类型"
                    autocomplete="off"
                    class="layui-input"
                />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电影上映地区</label>
            <div class="layui-input-block">
                <input
                    type="text"
                    name="area"
                    required
                    lay-verify="required"
                    placeholder="请输入电影上映地区"
                    autocomplete="off"
                    class="layui-input"
                />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电影时长</label>
            <div class="layui-input-block">
                <input
                    type="text"
                    name="time"
                    required
                    lay-verify="required"
                    placeholder="请输入电影时长"
                    autocomplete="off"
                    class="layui-input"
                />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电影上映时间</label>
            <div class="layui-input-block">
                <input
                    type="text"
                    name="upDate"
                    required
                    lay-verify="required"
                    placeholder="请输入电影上映时间"
                    autocomplete="off"
                    class="layui-input"
                />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年代</label>
            <div class="layui-input-block">
                <input
                    type="text"
                    name="year"
                    required
                    lay-verify="required"
                    placeholder="请输入年代"
                    autocomplete="off"
                    class="layui-input"
                />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电影评分</label>
            <div class="layui-input-block">
                <input
                    type="text"
                    name="score"
                    required
                    lay-verify="required"
                    placeholder="请输入电影评分"
                    autocomplete="off"
                    class="layui-input"
                />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电影票房</label>
            <div class="layui-input-block">
                <input
                    type="text"
                    name="count"
                    required
                    lay-verify="required"
                    placeholder="请输入电影票房"
                    autocomplete="off"
                    class="layui-input"
                />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">想看人数</label>
            <div class="layui-input-block">
                <input
                    type="text"
                    name="want"
                    required
                    lay-verify="required"
                    placeholder="请输入想看人数"
                    autocomplete="off"
                    class="layui-input"
                />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">剧情简介</label>
            <div class="layui-input-block">
                <input
                    type="text"
                    name="intro"
                    required
                    lay-verify="required"
                    placeholder="剧情简介"
                    autocomplete="off"
                    class="layui-input"
                />
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">导演</label>
            <button id="addDirectorBtn" type="button" class="layui-btn layui-btn-normal layui-btn-radius" >增加导演</button>
        </div>
        <div id="directorDiv"></div>
        
        <div class="layui-form-item">
            <label class="layui-form-label">演员</label>
            <button id="addActorBtn" type="button" class="layui-btn layui-btn-normal layui-btn-radius" >增加演员</button>
        </div>
        <div id="actorDiv"></div>

        <div class="layui-form-item">
            <label class="layui-form-label">图片</label>
            <button id="addImagesBtn" type="button" padding-left="30"  class="layui-btn layui-btn-normal layui-btn-radius" >增加图片</button>
        </div>
        <div id="imagesDiv"></div>
    </form>
       
        `;
        // 渲染增加弹出框
        $("#addfilmsTemplate").html(template);
    };

    handle() {
        let index = 0;
        let index1 = 0;
        let index2 = 0;
        layer.open({
            type: 1,
            title: "增加电影",
            btn: ['确定', '取消'],
            yes: function (ind) {
                console.log(index);
                let data = form.val("addForm");
                let director = [];
                let actor = [];
                let images = [];
                for (let i = 0; i < index; i++) {
                    director.push({
                        name: $(`#screenName${i}`).val(),
                        image: $(`[name='headImg${i}']`).val()
                    });
                }
                for (let i = 0; i < index1; i++) {
                    actor.push({
                        name: $(`#screenName1${i}`).val(),
                        filmName: $(`#screenfilmName1${i}`).val(),
                        image: $(`[name='headImg1${i}']`).val()
                    });
                }
                for (let i = 0; i < index2; i++) {
                    images.push($(`[name="headImgImages${i}"]`).val())
                    console.log($(`[name="headImgImages${i}"]`).val())
                }
                data["director"] = JSON.stringify(director);
                data["actor"] = JSON.stringify(actor);
                data["images"] = JSON.stringify(images);
                $.ajax({
                    type: "post",
                    url: "/films",
                    data,
                    success(res) {
                        layer.alert("添加成功")
                        table.reload("filmsTable", {
                            where: {}
                        });
                        layer.close(ind);
                    }
                });


            },
            success: function (layero) {

                // 给增加导演的按钮添加事件
                $("#addDirectorBtn").click(function () {
                    let screenStr = `
                    <div id="screenDiv1${index}" style="border:1px dashed;margin:10px;padding:10px">
                        <div class="layui-form-item">
                        <label class="layui-form-label">导演名</label>
                        <div class="layui-input-block">
                            <input
                            type="text"
                            id="screenName${index}"
                            required
                            lay-verify="required"
                            placeholder="请输入导演名"
                            autocomplete="off"
                            class="layui-input"
                            />
                        </div>
                        
                        </div>
                        <div class="layui-form-item">
                        <label class="layui-form-label">导演图片</label>
                        <div class="layui-input-block">
                            <button type="button"  class="layui-btn" id="uploadBtn${index}">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>
                            <img id="uploadImg${index}" width="80" height="100" />
                            <input type="hidden" name="headImg${index}" >
                        </div>
                        </div>
                        <div class="layui-form-item">
                        <div class="layui-input-inline">
        
                        <button type="button" data-index="${index}" id="delete1" class="layui-btn layui-btn-danger layui-btn-radius del-seat-btn ">删除</button>
                        </div>
                        </div>
                    </div>
                    `;
                    $("#directorDiv").append(screenStr);
                    $("#directorDiv").on("click", ".del-seat-btn", function () {
                        let index = $(this).attr("data-index");
                        $("#screenDiv1" + index).remove();
                    });

                    // 上传头像
                    console.log(index);
                    upload.render({
                        elem: `#uploadBtn${index}`,
                        url: "/upload",
                        // 将index赋值给data
                        data: { index },
                        done(res) {
                            console.log(index);
                            console.log("Res", res);
                            // 将图片显示在右边图片框里
                            $(`#uploadImg${this.data.index}`).attr("src", "/image/" + res.filename);
                            // 将图片上传上去
                            $(`[name=headImg${this.data.index}]`).val(res.filename);
                        }
                    });
                    index++;


                    // $(`#headImg`)
                });
                // 给增加演员的按钮添加事件
                $("#addActorBtn").click(function () {
                    let screenStr = `
                    <div id="screenDiv2${index1}" style="border:1px dashed;margin:10px;padding:10px">
                        <div class="layui-form-item">
                        <label class="layui-form-label">演员名</label>
                        <div class="layui-input-block">
                            <input
                            type="text"
                            id="screenName1${index1}"
                            required
                            lay-verify="required"
                            placeholder="请输入演员名"
                            autocomplete="off"
                            class="layui-input"
                            />
                        </div>
                        </div>
                        <div class="layui-form-item">
                        <label class="layui-form-label">饰演名</label>
                        <div class="layui-input-block">
                            <input
                            type="text"
                            id="screenfilmName1${index1}"
                            required
                            lay-verify="required"
                            placeholder="请输入饰演名"
                            autocomplete="off"
                            class="layui-input"
                            />
                        </div>
                        </div>
                        <div class="layui-form-item">
                        <label class="layui-form-label">演员图片</label>
                        <div class="layui-input-block">
                            <button type="button"  class="layui-btn" id="uploadBtnActor${index1}">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>
                            <img id="uploadImg1${index1}" width="80" height="100" />
                            <input type="hidden" name="headImg1${index1}" >
                        </div>
                        </div>
                        <div class="layui-form-item">
                        <div class="layui-input-inline">
        
                        <button type="button" data-index1="${index1}" class="layui-btn layui-btn-danger layui-btn-radius del-seat-btn ">删除</button>
                        </div>
                        </div>
                    </div>
                    `;
                    $("#actorDiv").append(screenStr);
                    $("#actorDiv").on("click", ".del-seat-btn", function () {
                        let index1 = $(this).attr("data-index1");
                        $("#screenDiv2" + index1).remove();
                    });

                    // 上传头像
                    console.log(index1);
                    upload.render({
                        elem: `#uploadBtnActor${index1}`,
                        url: "/upload",
                        // 将index1赋值给data
                        data: { index1 },
                        done(res) {
                            console.log(index1);
                            console.log("Res", res);
                            // 将图片显示在右边图片框里
                            $(`#uploadImg1${this.data.index1}`).attr("src", "/image/" + res.filename);
                            // 将图片上传上去
                            $(`[name=headImg1${this.data.index1}]`).val(res.filename);
                        }
                    });
                    index1++;
                });
                // 给增加图片集的按钮添加事件
                $("#addImagesBtn").click(function () {
                    let screenStr = `
                        <div id="screenDiv${index2}" style="border:1px dashed;margin:10px;padding:10px">
                            
                            <div class="layui-form-item">
                            <label class="layui-form-label">图片集</label>
                            <div class="layui-input-block">
                                <button type="button"  class="layui-btn" id="uploadBtnImages${index2}">
                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                </button>
                                <img id="uploadImgImages${index2}" width="80" height="100" />
                                <input type="hidden" name="headImgImages${index2}" >
                            </div>
                            </div>
                            <div class="layui-form-item">
                            <div class="layui-input-inline">
            
                            <button type="button" data-index2="${index2}" class="layui-btn layui-btn-danger layui-btn-radius del-seat-btn ">删除</button>
                            </div>
                            </div>
                        </div>
                                    `;
                    $("#imagesDiv").append(screenStr);

                    $("#imagesDiv").on("click", ".del-seat-btn", function () {
                        let index2 = $(this).attr("data-index2");
                        $("#screenDiv" + index2).remove();
                    });
                    // 上传头像
                    console.log(index2);
                    upload.render({
                        elem: `#uploadBtnImages${index2}`,
                        url: "/upload",
                        // 将index2赋值给data
                        data: { index2 },
                        done(res) {
                            console.log(index2);
                            console.log("Res", res);
                            // 将图片显示在右边图片框里
                            $(`#uploadImgImages${this.data.index2}`).attr("src", "/image/" + res.filename);
                            // 将图片上传上去
                            $(`[name=headImgImages${this.data.index2}]`).val(res.filename);
                        }
                    });
                    index2++;
                });
            },
            // 将增加弹出框那儿进行渲染
            content: $("#addfilmsTemplate").html()
        });
    };
}